<template>
	<view>
		<view class="top disc jsa aic">
			<image :src="stateImage" mode=""></image>
			<view class="tac fw">{{stateFont}}</view>
		</view>

    <u-modal :show="show"  :title="title" :show-cancel-button="true" @confirm="confirmSetting" @cancel="cancelSetting" ref="uModal" :asyncClose="true" >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>

		<view v-if="Object.keys(agentList).length > 0 && showState">
			<view class="tac fz12 color6">为您推荐以下业务员</view>

			<view class="salesList" >
				<view class="salesBar">
					<view class="tops disp aic">
						<image :src="imguser+'/minis/order/WeChat.png'" mode=""></image>
						<view class="">业务经理会在24小时内与你联系</view>
					</view>


					<view class="bot disc jsb" v-for="(item,index) in agentList" :key="index">
						<view class="disp">
							<image class="salesmanPic" :src="item.avatar" mode="">
              </image>
             <text style="width: 100px">{{item.name}}</text>
              <text class="colorb fw" style="text-align: right;position: absolute;margin-left: 72%;color: #4CAF50;" @click="settingAgent(item.id)">
                选择Ta
              </text>
						</view>

						<view class="disb aic">
							<view class="">
								<text>电话：</text>
								<text>{{item.mobile}}</text>
							</view>
							<text class="colorb fw" @click="callPhone(item.mobile)" style="color: #3d55da">拨打电话</text>
						</view>
					</view>

				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import { toApply,allocationAgent } from '../../api/category';
  import config from '@/common/config'
	export default {
		data() {
			return {
        show:false,
        showState:true,
        content:'设置当前业务员为此订单的操作员',
				id:null,
				type:null,
        tableId: 0,
				amount:null,
        imguser:config.baseImgUrl,
        stateImage: '',
        stateFont: '',
        agentList: [],
        agentId:null,
        orderId:null,
				product:{flag:false}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.amount = option.amount
      this.tableId = option.tableId
			this.postApply()
		},
		methods:{
			//申请
			postApply(){
				toApply(
				{
					id:this.id,
					type:this.type,
					amount:this.amount,
          tableId:this.tableId,
					userId:''
				}).then(res => {
          console.log(res)
          if (res.data.flag){
            this.stateImage = this.imguser + '/minis/order/succeed.png'
            this.stateFont = "提交成功！"
            this.agentList = res.data.voList
            this.orderId = res.data.orderId
          }else {
            this.stateImage = this.imguser + '/minis/order/error.png'
            this.stateFont = "提交失败！"
            uni.$u.toast('你已提交过此产品，请勿重复提交！')
          }
				})

			},
      settingAgent(id){
        this.show = true
        this.agentId = id
      },
      confirmSetting() {
        setTimeout(() => {
          allocationAgent(
              {
                agentId: this.agentId,
                orderId: this.orderId
              }).then(res => {
             uni.$u.toast('操作成功！')
             this.showState = false
          })
        }, 800)
        this.show = false
      },
      cancelSetting(){
        this.show = false
      },
			//拨打电话
			callPhone(mobile){
				uni.makePhoneCall({
					phoneNumber:mobile,
					success:function(){
						//uni.$u.toast('跳转中...');
					},
					fail() {
						//uni.$u.toast('拨打取消')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.top{
	height: 300rpx;
	image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}
.salesList{
	padding: 20rpx;
		.salesBar{
			box-shadow: 0rpx 0rpx 20rpx #bcbcbc;
			border-radius: 10rpx;
			margin: 20rpx 0;
			.tops{
        padding: 20rpx 30rpx;
        background-color: #FF5722;
        border-radius: 5px;
        color: #ffffff;
				image{
          width: 40rpx;
          height: 40rpx;
					margin-right: 10rpx;
				}
			}
			.bot{
				padding: 20rpx 30rpx;
				height: 130rpx;
        border-top: 1px solid #dde8ed;
				.salesmanPic{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
